<template>
    <div class="task">
        <h2 class="tit">新建任务</h2>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="85" label-position="left">
			<div class="pert">
				<p class="title">基本信息</p>
                <Row class="box" :gutter='32'>
					<Col span="8">  
						<FormItem label="任务名称：" prop="taskName" class="hongdian">
							<Input v-if="mode !== 'review'" v-model="formValidate.taskName" placeholder="请输入25个汉字以内" style="width:100%" maxlength="25"></Input>
							<div v-else class="content">{{formValidate.taskName}}</div>
						</FormItem>
						<FormItem prop="collectTime">
							<!--  label="采集时间："  -->
							<div style='display:flex;margin-left:-95px'>
								<span style='color:#fc6c49;font-size:18px;margin-right:5px'>*</span><span >采集时间：</span>
								<TimePicker v-if="mode !== 'review'" format="HH:mm" type="timerange" placement="bottom-end" v-model="formValidate.collectTime" placeholder="请选择采集时间" :steps="[1, 10]" style="width: 168px"></TimePicker>
								<div v-else class="content">{{formValidate.planeBeginTime}}-{{formValidate.planeEndTime}}</div>
							</div>
						</FormItem>
						<FormItem v-if="mode == 'review'" label="计划居民人数（人）:" :label-width="130">
							<div class="content">{{formValidate.personNum}}</div>
						</FormItem>
					</Col>
					<Col span="9">
						<FormItem label="任务地区：" prop="areaId" :rules="genAddressRule(formValidate)" class="hongdian">
							<newfourLevelLinkage
								v-if="identity==1"
								@changeProvince="changeProvince"
								@changeCity="changeCity"
								@changeArea="changeArea"
								:province="Number(formValidate.provinceId)"
								:city="Number(formValidate.cityId)"
								:area="Number(formValidate.areaId)"    
								ref="newfourLevelLinkage"             
								style="width:100%"                
							></newfourLevelLinkage>    
							<!-- <div v-else class="content">{{formValidate.provinceName}}&nbsp;&nbsp;&nbsp;&nbsp;{{formValidate.cityName}}&nbsp;&nbsp;&nbsp;&nbsp;{{formValidate.areaName}}</div>  -->
							<div v-if="identity!=1">
								<span v-if="formValidate.provinceName">{{formValidate.provinceName}}</span>
                                <span v-if="formValidate.cityName">{{formValidate.cityName}}</span>
                                <span v-if="formValidate.areaName">{{formValidate.areaName}}</span>  
							</div>
						</FormItem>
						<FormItem prop="workHours">
							<div style='display:flex;margin-left:-90px'>
								<span style='color:#fc6c49;font-size:18px;margin-right:5px'>*</span><span >预估工时（小时）：</span>
								<input min="0" max="24" v-if="mode !== 'review'" v-model="formValidate.workHours" type="number" @input="srInput" class="inputnumber" placeholder="请选择数字"/>
								<div v-else class="content">{{formValidate.workHours}}</div>
							</div>
						</FormItem>
						<FormItem v-if="mode == 'review'" label="状态:" :label-width="50">
							<div class="content">{{formValidate.statusName}}</div>
						</FormItem>
					</Col>
					<Col span="7">
						<FormItem label="采集日期：" prop="collectDate">
							<DatePicker v-if="mode !== 'review'" type="date" v-model="formValidate.collectDate" :options="options" placeholder="请选择采集日期" format="yyyy-MM-dd" placement="bottom-end" style="width: 200px"></DatePicker>
							<div v-else class="content">{{formValidate.collectDate}}</div>
						</FormItem>
						<FormItem v-if="mode == 'review'" label="计划工作人数（人）:" :label-width="130">
							<div class="content">{{formValidate.workerNum}}</div>
						</FormItem>
					</Col>
				</Row>
            </div>
			<div class="pert">
				<p class="title">紧急联系人</p>
				<div class="cueBox">
					<div class="icon">
						<img src="../../../../assets/images/warning.png" alt="">
					</div>
					<div class="cue">
						<span class="s1">使用说明</span>
						<br />
						<span class="s2">当前任务出现阳性样本时，会第一时间短信通知此处添加的人员，建议添加可正常进行联系的负责人。</span>
					</div>
				</div>
				<Row class="box">
					<Col span="24">  
						<div class="search">
							<Button type="info" v-if="mode !== 'review'" @click="addLocation" class="addbutton" style="width:51px;height:35px;">
								<i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
							</Button>
							<!-- <Input class="w-input" v-model="searchKey" clearable placeholder="联系人名称"/>
							<Button type="primary" @click="loadPage(1)" class="addbutton">
								<Icon type="ios-search" size="14"/>
							</Button>
							<Button @click="cancel" class="addbutton">
								<i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
							</Button> -->
						</div>
					</Col>
					<Col span="24">  
						<div class="m-table">
							<Table v-if="mode !== 'review'" border stripe :columns="contactColumn" :data="datalist"></Table>
							<Table v-else border stripe :columns="contactColumnReview" :data="datalist"></Table>
						</div>
					</Col>
				</Row>
			</div>		
        </Form>
		<div class="btnBox">
			<Button type="primary" v-if="mode !== 'review'" @click="handleSubmit('formValidate')" :disabled='disabledSave' class="btn">
				<Icon type="ios-checkmark icon"/>保存
			</Button>
			<Button type="primary" v-if="mode == 'review' && taskStatus == 1 " @click="taskSubmit" :disabled='disabledtask' class="btn">
				<Icon type="ios-checkmark icon"/>发布任务
			</Button>
			<Button type="primary" v-if="mode == 'review' && (taskStatus == 3 || taskStatus == 2) " @click="judgeInvalid" :disabled='disabledCancel' class="btn">
				<Icon type="ios-checkmark icon"/>完成任务
			</Button>
			<Button @click="taskCancel" class="btn"  v-if="mode == 'review' && (taskStatus == 3 || taskStatus == 2) " :disabled='disableddel'>
				<i class = "iconfont icon-butongyi icon"></i>取消任务
			</Button>
			<Button @click="back" class="btn">
				<i class = "iconfont icon-butongyi icon"></i>取消
			</Button>
		</div>
		<!-- 添加联系人弹窗 -->
		<Modal
			v-model="contactModal"
            title = "添加联系人"
			:footer="null"
            :mask-closable="false"
            :width = '450'
            styles="padding: none;margin: none"
			class="contactModal"
        >  	
			<div class="contactBox">
				<div class="contact">
					<div style="margin-right: 15px;">已添加：</div>
					<div>
						<div v-for="(x,index) in checkContactlist" :key="index" class="yitianjia">
							<span>{{x.name}}</span>
							<span>{{x.phone}}</span>
							<span @click="del(x.id)" class="del">删除</span>
						</div>
					</div>
				</div>
				<div class="contact">
					<span>选择联系人：</span>
					<Select style="width: 70%" clearable v-model="contactId" placeholder="请选择联系人" label-in-value='true'>
						<Option v-for="(item,index) in contactlist" :key="index" :value="item.id" @click.native="chooseContact(item)" >
							{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.phone}}
						</Option>
					</Select>
				</div>
			</div>
			<div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="submitContact" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="contactModal = false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
		</Modal>
		<!-- 作废人员弹窗 -->
		<Modal
			v-model="invalidModal"
            title = "提示"
			:footer="null"
			:closable="false"
            :mask-closable="false"
            :width = '400'
            styles="padding: none;margin: none"
        >  	
			<div class="contactBox">
				<span>该任务下存在作废人员，是否强制完成任务？</span>
			</div>
			<div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="judgeAttendance" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />是
                </Button>
                <Button @click="invalidModal = false,disabledCancel = false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>否
                </Button>		
            </div>			
		</Modal>			
		<!-- 作废人员弹窗 -->
		<Modal
			v-model="attendanceModal"
            title = "提示"
			:footer="null"
			:closable="false"
            :mask-closable="false"
            :width = '400'
            styles="padding: none;margin: none"
        >  	
			<div class="contactBox">
				<span>计划时间外，存在签到人员，是否强制完成任务？</span>
			</div>
			<div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="taskfinish" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />是
                </Button>
                <Button @click="attendanceModal = false,disabledCancel = false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>否
                </Button>		
            </div>			
		</Modal>			
		<!-- 短信弹窗 -->
		<Modal
			v-model="noteModal"
            title = "提示"
			:footer="null"
			:closable="false"
            :mask-closable="false"
            :width = '400'
            styles="padding: none;margin: none"
        >  	
			<div class="contactBox">
				<span>任务已发布成功，是否需要发送短信提醒相关人员？</span>
			</div>
			<div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="note" style="width:75px;height:35px;" :disabled ='disabledNote'>
                    <Icon type="ios-checkmark" style="margin-right: 5px" />是
                </Button>
                <Button @click="back" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>否
                </Button>		
            </div>			
		</Modal>			
    </div>
</template>

<script>
import vueEditor from "@/components/vueEditor";
import code from "@/configs/base.js";
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import { DatePicker,TimePicker } from "view-design";
import Utils from "@/utils";
import cookie from "@/utils/cookie.js";
export default {
	components: {
		newfourLevelLinkage,
		vueEditor,
		DatePicker,
		TimePicker,
	},
	props: {
		mode: String,
	},
    data() {
		return {
			options: {
				disabledDate (date) {
					return date && date.valueOf() < Date.now() - 86400000;
				}
			},
			provList: [],
			cityList: [],
			countyList: [],
			formValidate: {
				taskName: '',
				provinceId: '',
				provinceName: '',
                cityId: '',
                cityName: '',
                areaId: '',
                areaName: '',
                planeBeginTime: '',
                planeEndTime: '',
                workHour: '',
                workHours: '',
				collectTime: [],
				collectDate: '',
				taskContacts: [],
				status: 1,
      		},
			ruleValidate: {
				taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
				collectTime: [{ required: true, type: 'array', message: "请选择采集时间", trigger: "change", }],
				areaId: [{ required: true, message: "请选择任务地区", trigger: "change", }],
				collectDate: [{ required: true, message: "请选择采集日期", trigger: "change",type:'date' }],
				// workHours: [{ required: true, message: "请输入预估工时", trigger: "change", type:'number'}],
			},
			contactColumnReview: [
				{ title: "排序", key: "iNum", align: "center", width: 100,
                    render: (h, params) => {
                        let iNum = params.row._index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "联系人",
                    key: "name",
                    align: "center",
                    // width: 300
                },
                {
                    title: "联系人电话",
                    key: "phone",
                    align: "center",
                    // width: 300
                },
			],
			contactColumn: [
				{ title: "排序", key: "iNum", align: "center", width: 100,
                    render: (h, params) => {
                        let iNum = params.row._index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "联系人",
                    key: "name",
                    align: "center",
                    // width: 300
                },
                {
                    title: "联系人电话",
                    key: "phone",
                    align: "center",
                    // width: 300
                },
				{
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 100,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#fc6c49',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.checkContactlist.splice(params.row._index, 1);
                                        }
                                    }
                                },
                                "删除"
                            ),
                        ];
                    }
                }
			],
			checkContactlist: [],
			contactlist: [],
			datalist: [],
			contactModal: false,
			disabledSave: false,
			disabledtask: false,
			disabledCancel: false,
			disableddel: false,
			contactId: '',
			id: '',
			taskStatus: '',
			invalidModal: false,
			attendanceModal: false,
			noteModal: false,
			disabledNote: false,
			ownArea: [],
      		identity: '',
        }
    },
    created() {
		this.id = this.$route.query.id ? this.$route.query.id : null;
		this.taskStatus = this.$route.query.taskStatus ? this.$route.query.taskStatus : null;
		let breadList = [
		{ path: "/index", title: "首页" },
		{
			path: "/index/publicOperation/healthInformation/list",
			title: "健康资讯管理"
		}
		];
		this.$emit("changeBreadList", breadList);
		this.identity = cookie.getCookie("idtt");
		this.ownArea = JSON.parse(cookie.getCookie("ownArea"));
		if(this.identity !=1) {
			if (this.ownArea.province) {
				this.formValidate.provinceId = this.ownArea.province.id;
				this.formValidate.provinceName = this.ownArea.province.name;
			}
			if (this.ownArea.city) {
				this.formValidate.cityId = this.ownArea.city.id;
				this.formValidate.cityName = this.ownArea.city.name;
			}
			if (this.ownArea.area) {
				this.formValidate.areaId = this.ownArea.area.id;
				this.formValidate.areaName = this.ownArea.area.name
			}
		}
	},
	mounted() {
		if (this.mode !== 'add') {
			this.findtTaskDetail(this.id);
		}
	},
	methods: {
		genAddressRule(formValidate) {
			const that = this;
			return {
				required: true,
				trigger: "change",
				validator: (rule, value, callback) => {
				if (!formValidate.provinceId) {
					callback(new Error("请选择省份"));
				} else if (!formValidate.cityId) {
					callback(new Error("请选择市"));
				} else if (!formValidate.areaId) {
					callback(new Error("请选择区/县"));
				} else {
					callback();
				}
				}
			};
		},
		//选择省
        changeProvince(val) {
            this.formValidate.provinceId = val;
			this.provList = this.$store.getters.getProvinceList
            this.provList.forEach(i =>{
                if (i.id == this.formValidate.provinceId) {
                    this.formValidate.provinceName = i.name
                }
            })
        },
        changeCity(val) {
            this.formValidate.cityId = val
			this.cityList = this.$store.getters.getCityList(this.formValidate.provinceId);
            this.cityList.forEach(i =>{
                if (i.id == this.formValidate.cityId) {
                    this.formValidate.cityName = i.name
                }
            })
        },
        changeArea(val) {
            this.formValidate.areaId = val;
			this.countyList = this.$store.getters.getAreaList(this.formValidate.cityId);
            this.countyList.forEach(i =>{
                if (i.id == this.formValidate.areaId) {
                    this.formValidate.areaName = i.name
                }
            })
        },
		//添加采集点
		addLocation() {
			this.contactModal = true
			this.getContactlist()
		},
		//获取所有联系人
        getContactlist() {
            var params = {};
            params.searchStatus = 1;
            params.pageNo = 1;
            params.pageSize = 100000;
            this.$axios
                .post(api.findContactPage, params)
                .then(resp => {
                    if (resp.data.success) {                       
                        if(resp.data.object.records) {
                            this.contactlist = resp.data.object.records;
                        } else {
                            this.contactlist = []
                        }                   
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
		srInput(e) {
			this.formValidate.workHours = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
          	if(e.target.value>24)this.formValidate.workHours=24
		},
		//控制同一联系人重复添加
		chooseContact(val) {
			console.log(this.checkContactlist)
			if(!this.checkContactlist.length) {
				this.checkContactlist.push(val)
			} else {
				let flag = true
				this.checkContactlist.forEach(i=>{
					if(val.id == i.id || val.id == i.contactId) {
						flag = false;
					}
				}) 
				if(flag) {
					this.checkContactlist.push(val)
				} else {
					this.$Message.error("该联系人已添加，请勿重复添加！");
					return;
				}
			}
		},
		del(id) {
			const index = this.checkContactlist.findIndex(i => i.id === id);
    		this.checkContactlist.splice(index, 1);
		},
		submitContact() {
			this.contactModal = false
			this.checkContactlist.forEach(i =>{
				i.contactId = i.id
			}) 
			this.datalist = this.checkContactlist
			this.contactId = ''
		},
		handleSubmit() {
			if(!this.formValidate.collectTime[0]) {
				this.$Message.error("请完整填写采集时间!");
				return;
			}
			if(!this.formValidate.workHours) {
				this.$Message.error("请完整填写预估工时!");
				return;
			}
			this.disabledSave = true
			this.$refs['formValidate'].validate(valid => {
				if (valid) {
					let date = Utils.getNowDateBySpecialFormat(this.formValidate.collectDate).substring(0,10)
					this.formValidate.workHour = this.formValidate.workHours*60
					this.formValidate.planeBeginTime = date + ' ' + this.formValidate.collectTime[0] + ':00';
					this.formValidate.planeEndTime = date + ' ' + this.formValidate.collectTime[1] + ':00';
					this.formValidate.taskContacts = this.datalist
					if(this.id) {
						this.formValidate.id = this.id
					}
					this.$axios.post(api.saveOrUpdateTask, this.formValidate).then(res => {
						if (res.data.success) {
							this.$Message.success("操作成功");
							this.disabledSave = false
							this.back();
						} else {
							this.$Message.error(res.data.message);
							this.disabledSave = false
						}
					}).catch(() => {
						this.disabledSave = false
					});
				}  else {
					this.$Message.error("请完整填写必填项!");
					this.disabledSave = false
				}
			});
		},
		back() {
			if(this.noteModal) {
				this.noteModal = false
				this.disabledNote = false
			}
			this.functionJS.queryNavgationTo(
				this,
				"/index/nucleicacid/task/list",
				{
					pageNo: this.$route.query.pageNo,
				}
			);
		},
		findtTaskDetail() {	
			this.$axios.post(api.findTaskDetails, {id: this.id}).then(res => {
				if (res.data.success) {
					this.formValidate = res.data.object;
					this.datalist = this.formValidate.taskContacts
					if(this.formValidate.taskContacts) {
						this.formValidate.taskContacts.forEach(i=>{
							i.id = i.contactId
						})
						this.checkContactlist = this.formValidate.taskContacts
					}
					this.formValidate.workHours = res.data.object.workHour/60
					this.formValidate.collectDate = this.formValidate.planeBeginTime.substring(0,10)
					this.formValidate.planeBeginTime = this.formValidate.planeBeginTime.substring(11,16)
					this.formValidate.planeEndTime = this.formValidate.planeEndTime.substring(11,16)
					this.formValidate.collectTime = [this.formValidate.planeBeginTime,this.formValidate.planeEndTime]
					if(this.formValidate.status == 1) {
						this.formValidate.statusName = '未发布'
					} else if(this.formValidate.status == 2) {
						this.formValidate.statusName = '已发布'
					} else if(this.formValidate.status == 3) {
						this.formValidate.statusName = '进行中'
					} else if(this.formValidate.status == 4) {
						this.formValidate.statusName = '已完成'
					} else if(this.formValidate.status == 5) {
						this.formValidate.statusName = '已删除'
					}
				} else {
					this.$Message.error(res.data.message);
				}
			}).catch(() => {

			});
		},
		//发布任务
		taskSubmit() {
			this.disabledtask = true
			this.$axios.post(api.taskPublish, {id: this.id}).then(res => {
				if (res.data.success) {
					this.$Message.success(res.data.message);
					this.disabledtask = false
					this.noteModal = true
					// this.back();
				} else {
					this.$Message.error(res.data.message);
					this.disabledtask = false
				}
			}).catch(() => {
				this.disabledtask = false
			});
		},
		//完成任务
		taskfinish() {
			this.$axios.post(api.finishTaskPublish, {id: this.id}).then(res => {
				if (res.data.success) {
					this.$Message.success(res.data.message);
					this.disabledCancel = false
					this.attendanceModal = false
					// this.noteModal = true
					this.back();
				} else {
					this.$Message.error(res.data.message);
					this.disabledCancel = false
					this.attendanceModal = false
				}
			}).catch(() => {
				this.disabledCancel = false
			});
		},
		//删除任务
		taskCancel() {	
			this.$axios.post(api.cancleTaskPublish, {id: this.id}).then(res => {
				if (res.data.success) {
					this.$Message.success(res.data.message);
					this.back();
					this.disabledCancel = false
				} else {
					this.$Message.error(res.data.message);
					this.disabledCancel = false
				}
			}).catch(() => {
				this.disabledCancel = false
			});
		},
		// 完成发布-判断是否有作废人员
		judgeInvalid() {
			this.disabledCancel = true
			this.$axios.post(api.finishTaskIfCancelNum, {id: this.id}).then(res => {
				if (res.data.object.code == 1) {
					this.invalidModal = true
				} else {
					this.judgeAttendance()
				}
			}).catch(() => {
				this.$Message.error(res.data.object.msg);
			});
		},
		// 完成发布-判断是否有作存在签到人员
		judgeAttendance() {
			this.$axios.post(api.finishTaskIfSignIn, {id: this.id}).then(res => {
				if (res.data.object.code == 1 || res.data.object.code == 4) {
					// this.$Message.info(res.data.object.msg);
					this.taskfinish()
					this.invalidModal = false
				} else if(res.data.object.code == 2) {
					this.invalidModal = false
					this.attendanceModal = true
				} else if(res.data.object.code == 3) {
					this.$Message.info(res.data.object.msg);
					this.invalidModal = false
					this.disabledCancel = false
				}
			}).catch(() => {
				this.$Message.error(res.data.object.msg);
				this.disabledCancel = false
			});
		},
		//确定是否发送短信
        note() {
            this.disabledNote = true
            let id = this.id
            this.$axios.post(api.sendMsgTaskPublish, {id}).then(res => {
                if (res.data.success) {
                    this.$Message.success(res.data.message);
                    this.disabledNote = false
                    this.noteModal = false
					this.back();
                } else {
                    this.$Message.error(res.data.message);
                    this.disabledNote = false
                }
            }).catch(() => {
                this.disabledNote = false
            });
        },
    },
}
</script>

<style scoped lang="less">
.task {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 20px 0;
		width: 99%;
    }
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
    .pert {
		width: 97%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
    	}
        .box{
			// padding: 0 50px;
			padding-left: 50px;
			width: 100%;
			.hongdian{
				margin-left:-10px
			}
		}
		.inputnumber {
			width: 150px;
			background: #fff;
			border: none;
			outline: none;
			text-indent: 10px;
			line-height: 30px;
			border: 1px solid #ddd;
			border-radius: 4px;
			color: #666;
		}
		.inputnumber:focus{
			border-color:#5362e1
		}
		.cueBox {
			background-color: #fdf6ec;
			display: flex;
			padding: 5px 0 5px 15px;
			margin-top: -20px;
			.icon {
				vertical-align: middle;
				margin-right: 15px;
				img {
					width: 35px;
					height: 35px;
				}
			}
			.cue {
				.s1 {
					color: #f5a300;
					font-weight: bold;
				}
				.s2 {
					color: #e6a057;
				}
			}
		}
		.search {
			padding-top: 20px;
			.addbutton{
				width:51px;
				height:35px;
				margin-right: 10px;
			}
			.w-input {
				width: 150;
				margin-right: 10px;
			}
		}
    }
	.btnBox {
		width: 100%;
		text-align: center;
		.btn {
			min-width: 75px;
			height: 35px;
			.icon {
				margin-right: 5px;
				font-size: 14px;
			}
		}
	}
}
.contactBox {
    margin: 15px;
	font-size: 14px;
    .contact {
        display: flex;
        margin-bottom: 15px;
		width: 100%;
		span {
			margin-right: 15px;
		}
		.yitianjia {
			width: 100%;
			margin-bottom: 15px;
    	}
		.del {
			color: #fc6c49;
			margin-left: 50px;
			float: right;
		}
    }
}
.contactModal {
	/deep/ .ivu-modal-wrap {
    .ivu-modal{
			float:right !important;
			background-color: #fff;
			border-radius: 10px;
			top: 0px;
			height: 100%;
		}
	}
}

</style>